<!DOCTYPE html>
<html>
<head>
  <title>exaple method</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
</head>
<body>
  <!-- 在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。 -->
  <div id="app">
    {{message}}
  	<button @click="add(2)">add</button>
  </div>
  <button onclick="reduce()">reduce</button>
  <script type="text/javascript">
    var app = new Vue({
      el:"#app",
      data:{
        message: 1,
      },
      methods: {
      	add: function(num){
      		this.message += num;
      	}
      }
    });
    app.$on('reduce',function(){
	    console.log('执行了reduce');
	    this.message--;
	});

	function reduce(){
		app.$emit('reduce');
	}
  </script>
</body>
</html>